import React, {useState} from "react";
import {Grid, makeStyles, Tab, Tabs} from "@material-ui/core";

import Profile from "./components/Profile";
import {Toolbar} from "../../shared/components";

const useStyles = makeStyles(theme => ({
    tabsRoot: {borderBottom: `1px solid ${theme.palette.grey[300]}`}
}));

const Account = (props) => {
    const classes = useStyles();

    const [tabIndex, setTabIndex] = useState(0);

    const handleChange = (e, index) => setTabIndex(index);

    return (
        <Grid container spacing={4}>
            <Toolbar title="Settings"/>

            <Grid item xs={12}>
                <Tabs
                    value={tabIndex}
                    onChange={handleChange}
                    indicatorColor={"primary"}
                    className={classes.tabsRoot}
                >
                    <Tab label={"Profile"}/>
                    <Tab label={"Subscription"}/>
                    <Tab label={"Settings"}/>
                    <Tab label={"Notification"}/>
                </Tabs>

                <div role="tabpanel" hidden={tabIndex !== 0}>
                    {tabIndex === 0 && <Profile/>}
                </div>
            </Grid>
        </Grid>
    );
};

export default Account;
